<template>
  <div class="record">
    <div
      class="orderRecord"
      :style="
        `margin-right: ${
          orderData.priceType === quotationDict.priceType.pricing.value
            ? '15px'
            : '0px'
        }`
      "
    >
      <a-card title="订单记录" size="small">
        <a-timeline v-if="orderRecord.length !== 0">
          <a-timeline-item v-for="item in orderRecord" :key="item.date">
            <p>{{ item.msg }}</p>
            <div>{{ $getTime(item.createDate) }}</div>
          </a-timeline-item>
        </a-timeline>
        <c-empty v-else />
      </a-card>
    </div>
    <div
      class="dealRecord"
      v-if="
        orderData.priceType === quotationDict.priceType.pricing.value &&
          !isLine()
      "
    >
      <a-card title="成交记录" size="small">
        <!-- 套保 -->
        <a-timeline v-if="dealRecord.length !== 0">
          <a-timeline-item v-for="item in dealRecord" :key="item.id">
            <c-desc :data="item" :columns="dealRecordColumns(item)" :column="4">
              <template v-slot:createDate>
                <span>{{ $getTime(item.createDate) }}</span>
              </template>
            </c-desc>
          </a-timeline-item>
        </a-timeline>
        <c-empty v-else />
      </a-card>
    </div>
  </div>
</template>

<script>
import {
  customergetorderlog,
  providergetorderlog,
  providergetorderdeallog,
  customergetorderdeallog
} from "@/api/order";
import { getlineorderlog } from "@/api/order-line";
import quotationDict from "@/dict/quotation";
import { isSeller, isLine } from "@/util/common";

export default {
  props: {
    orderData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      quotationDict,
      orderRecord: [],
      dealRecord: []
    };
  },
  computed: {
    //   根据是否返回该字段，判断是否展示
    dealRecordColumns() {
      return data => {
        return [
          {
            label: "成交吨数",
            prop: "tradedVolume"
          },
          {
            label: "期货单号",
            prop: "orderSysId",
            hidden: !data.orderSysId
          },
          {
            label: "本地报单号",
            prop: "orderRef",
            hidden: !data.orderRef
          },
          {
            label: "合约月",
            prop: "contractId",
            hidden: !data.contractId
          },
          {
            label: "成交均价",
            prop: "tradedPrice",
            hidden: !data.tradedPrice
          },
          {
            label: "成交时间",
            span: 2,
            slot: "createDate"
          },
          {
            label: "操作人",
            prop: "createUserName"
          }
        ];
      };
    }
  },
  methods: {
    isLine,
    // 查询线路订单记录
    getLineOrderRecord() {
      getlineorderlog({
        id: this.orderData.id
      }).then(res => {
        this.orderRecord = res.reverse();
      });
    },
    // 查询订单操作记录
    getOrderRecord() {
      let request = isSeller() ? providergetorderlog : customergetorderlog;
      request({
        orderId: this.orderData.id
      }).then(res => {
        this.orderRecord = res.reverse();
      });
    },
    // 查询订单成交记录
    getOrderDealRecord() {
      // 线路订单没有成交记录
      if (this.isLine()) return;
      let request = isSeller()
        ? providergetorderdeallog
        : customergetorderdeallog;
      request({
        orderId: this.orderData.id
      }).then(res => {
        if (res) this.dealRecord = res.reverse();
      });
    }
  },
  created() {
    if (this.isLine()) {
      this.getLineOrderRecord();
    } else {
      this.getOrderRecord();
    }
    this.getOrderDealRecord();
  }
};
</script>

<style lang="scss" scoped>
.record {
  display: flex;
}
.dealRecord,
.orderRecord {
  flex: 1;
  ::v-deep .ant-card-body {
    padding: 24px 18px;
  }
  ::v-deep .ant-card-body {
    overflow-y: auto;
    max-height: 800px;
  }
}
.dealRecord {
  margin-left: 15px;
}
</style>
